<template>
  <BackGround />
  <div>
    <div style="padding-right:10px;padding-left:10px;padding-top:0px;padding-bottom:30px;">
      <!-- 用户部分 -->
      <div class="user-info">
        <div class="user-head" @click="$router.push('/mineinfo')">
          <el-avatar :size="60" class="headimage" fit="cover" :src="user.headImage" />
        </div>
        <div class="user-name" @click="$router.push('/mineinfo')">{{user.nickName}}</div>
        <input style="position: fixed;left:10000000px" type="text" id="copyname">
        <div class="user-copyname" @click="copyname">
          <el-icon>
            <CopyDocument />
          </el-icon>
        </div>
      </div>
      <div class="content-one" @click="toLikeFan()">
        <el-row>
          <el-col :span="8" :offset="0">
            <div>{{num.lookNum}}</div>
            <div>浏览</div>
          </el-col>
          <el-col :span="8" :offset="0">
            <div>{{num.likeNum}}</div>
            <div>关注</div>
          </el-col>
          <el-col :span="8" :offset="0">
            <div>{{num.fanNum}}</div>
            <div>粉丝</div>
          </el-col>
        </el-row>
      </div>
      <!-- 内容 -->
      <div class="content-two">
        <div class="row1">
          <el-row :gutter="0">
            <el-col :span="6" :offset="0" @click="$router.push('/history')">
              <el-icon :size="40">
                <AlarmClock />
              </el-icon>
              <div>历史</div>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-icon :size="40">
                <Coin />
              </el-icon>
              <div>金币</div>
            </el-col>
            <el-col :span="6" :offset="0" @click="$router.push('/collection')">
              <el-icon :size="40">
                <Star />
              </el-icon>
              <div>收藏</div>
            </el-col>
            <el-col :span="6" :offset="0" @click="$router.push('/vip')">
              <el-icon :size="40">
                <Medal />
              </el-icon>
              <div>会员</div>
            </el-col>
          </el-row>
        </div>
        <!-- 广告位 -->
        <transition name="el-zoom-in-top">
          <div v-show="adverstingShow" class="advertising">广告
            <div class="close" @click="closeAdver">
              <el-icon>
                <CircleClose />
              </el-icon>
            </div>
          </div>
        </transition>
        <div class="htitle">我的相册</div>
        <div class="row2" @click="$router.push('/albumview')">
          <el-row :gutter="0">
            <el-col :span="8" :offset="0">
              <el-icon :size="40">
                <Notification />
              </el-icon>
              <div>{{albumView.albumNum}}</div>
              <div>数量</div>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-icon :size="40">
                <Picture />
              </el-icon>
              <div>{{albumView.photoNum}}</div>
              <div>图片</div>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-progress type="dashboard" :width="60" :stroke-width="10"
                :percentage="albumView.usePercent" :color="colors" />
              <div>使用空间</div>
            </el-col>
          </el-row>
        </div>

        <div class="htitle">创作中心</div>
        <div class="row3" @click="$router.push('/worksview')">
          <el-row :gutter="0">
            <el-col :span="6" :offset="0">
              <el-icon :size="30">
                <Reading />
              </el-icon>
              <div>创作数</div>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-icon :size="30">
                <View />
              </el-icon>
              <div>
                阅读量
              </div>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-icon :size="30">
                <ChatDotRound />
              </el-icon>
              <div>评论</div>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-icon :size="30">
                <Wallet />
              </el-icon>
              <div>收益</div>
            </el-col>
          </el-row>
        </div>

        <div class="row4">
          <div @click="$router.push('/mineinfo')">个人信息</div>
          <div>福利中心</div>
          <div>我的评论</div>
          <div @click="$router.push('/report')">帮助与反馈</div>
          <div>关于我们</div>
          <div>
            <router-link to="/setting">设置</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { copyText } from '../../utils/index';
import BackGround from '../../components/BackGround.vue';
export default {
  name: 'GMine',
  data () {
    return {
      //空间进度条
      percentage: 1,
      colors: [
        { color: '#4BD80C', percentage: 20 },
        { color: '#E1F70D', percentage: 40 },
        { color: '#F7CF0D', percentage: 60 },
        { color: '#F18411', percentage: 80 },
        { color: '#E40505', percentage: 100 }
      ],
      user: {},
      num: {
        lookNum: 0,
        likeNum: 0,
        fanNum: 0,
      },
      albumView: {
        albumNum: 0,
        photoNum: 0,
        usePercent: 0,
      },
      //广告
      adverstingShow: true,
      topstyle: 'rgba(127, 255, 212, 0)',
    }
  },
  components: {
    BackGround,
  },
  mounted () {
    document.documentElement.scrollTop = 0;
    this.testUserSpace();
    this.getFanNum();
    this.getUserVo();
    this.getAlbumView();
  },
  methods: {
    //测试一下进度条
    testUserSpace () {
      let percentage = this.percentage;
      let that = this;
      window.setInterval(
        function () {
          percentage = (percentage + 10) % 100;
          // console.log(percentage);
          that.percentage = percentage;
        },
        1000
      )
    },
    //获取关注信息
    getFanNum () {
      this.$axios.get("/fan/num").then((res) => {
        if (res.flag) {
          this.num = res.data;
        }
      })
    },
    //获取用户信息
    getUserVo () {
      this.$axios.get("/user/uservo").then((res) => {
        if (res.flag) {
          this.user = res.data;
          this.$cookies.set('headImage', res.data.headImage);
        }
      })
    },
    //获取相册信息
    getAlbumView () {
      this.$axios("/album/albumview").then(res => {
        if (res.flag) {
          this.albumView = res.data;
        }
      })
    },
    //复制用户名
    copyname () {
      var username = this.user.nickName;
      copyText(document.getElementById('copyname'), username);
    },
    //关闭广告
    closeAdver () {
      this.adverstingShow = false;
    },
    toLikeFan () {
      this.$router.push("/user/likefan/" + this.user.id);
    }
  },
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: gray;
}
.top {
  text-align: right;
  position: fixed;
  text-align: right;
  width: 100%;
  height: 50px;
  z-index: 10;
}

.user-info {
  padding-top: 10px;
  line-height: 70px;
}
.user-head {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  float: left;
}
.headimage {
  margin-top: 5px;
  margin-left: 5px;
}
.user-name {
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 70px;
  margin-left: 10px;
  float: left;
  font-size: 20px;
  font-weight: bold;
}
.user-copyname {
}

.content-one {
  margin-top: 10px;
  text-align: center;
  width: 100%;
  height: 60px;
}

.content-two {
  background-color: white;
  border-radius: 5px;
}
.advertising {
  position: relative;
  background-color: gold;
  height: 100px;
  width: 100%;
}
.advertising > .close {
  content: 'x';
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 20px;
}
.htitle {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}
.row1,
.row2,
.row3 {
  text-align: center;
  padding: 10px;
}
.row4 {
  padding: 10px;
}
.row4 > div {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-bottom: 1px solid gainsboro;
}
</style>